<script setup>
import { computed, useSlots, ref, reactive, provide, onUpdated } from 'vue';
import Pagination from "./pagination.vue"

const props = defineProps({
    pageSize: {
        type: Number,
        default: 20,
    }
})
const slots = useSlots();
const state = reactive({
    selectedIndex: null,
    currentPage: 1,
    pageSize: props.pageSize,
    total: 0
});
const container = ref(null);
const wrapper = ref(null);
const currentFirst = ref(0);
const bottomTop = ref(56);
const root = ref(null);
const heightOfEachPage = ref([{
    index: 0,
    height: 0
}]);
const totalPages = computed(() => {
    return heightOfEachPage.value.length
})

provide("ul", state)

onUpdated(updateByNo)

function updateByNo() {
    if (container.value && wrapper.value && heightOfEachPage.value.length <= 1) {
        var index = 0
        var first = heightOfEachPage.value[0]
        do {
            first = findFirstInNextPage(first)
            heightOfEachPage.value.push(first)
        } while (first)
    }
}


function findFirstInNextPage(current) {
    var found = false;
    var viewHeight = wrapper.value.clientHeight;
    var singleHeight = container.value.children[current.index].clientHeight
    var targetI = current.index + Math.floor(viewHeight / singleHeight)
    var currentTop = current.height;
    while (!found) {
        var item = container.value.children[targetI];
        var prev = container.value.children[targetI - 1];

        if (item == undefined) {
            return null
        }

        if ((item.offsetTop - currentTop) >= viewHeight && (prev.offsetTop - currentTop) < viewHeight) {
            return {
                index: targetI,
                height: item.offsetTop,
            }
        }

        var offet = Math.floor((currentTop - item.offsetTop + viewHeight) / item.clientHeight)

        // var offet = Math.floor((viewHeight + currentTop - item.offsetTop) / item.clientHeight);
        if (offet == 0) {
            offet = 1
        }
        targetI += offet
    }
}

function setOffset(top) {
    container.value.style.transform = `translateY(-${top}px)`
}

function update() {
    // var result = findFirstInNextPage();
    // if (result) {
    //     var currentOffset = container.value.children[currentFirst.value].offsetTop;
    //     bottomTop.value = root.value.clientHeight - result.offsetTop + currentOffset;
    // }
}

function selectPage(page) {
    state.currentPage = page;
    setOffset(heightOfEachPage.value[page - 1].height)
}

defineExpose({
    update
})


</script>

<template>
    <div style="height: 100%" ref="root">
        <div class="wrapper" ref="wrapper" :style="`height: calc(100% - ${bottomTop}px);`">
            <ul ref="container">
                <slot></slot>
            </ul>
        </div>
        <div class="flex end footer">
            <pagination :total-pages="totalPages" :size-around="1" @goto="selectPage" :current="state.currentPage" no-page-size-selector>
            </pagination>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.wrapper {

    overflow-y: hidden;
    overflow-x: hidden;
}

ul {
    list-style: none;
    padding-inline-start: 0;

    :deep(li) {
        padding: 5px 10px;

        &:nth-child(2n+1) {
            background-color: #fdfdfd;
        }

        &.active {
            color: rgba(9, 112, 255, 0.8);
            background-color: #F4F4F6;
        }
    }
}

</style>